<script>
export default {
  name: 'message',
  data() {
    return {
      hintLeft: '0px',
      hintTop: '0px',
      pressTimer: null, // 用来保存计时器ID
      isLongPress: false, // 判断是否长按
      pressDuration: 1000 // 长按阈值，单位：毫秒
    };
  },
  methods: {
    clickDisturb() {
      console.log('clickDisturb');
    },
    clickDel() {
      console.log('clickDel');
    },
    startPress(e) {
      this.isLongPress = false;
      this.pressTimer = setTimeout(() => {
        this.isLongPress = true;
        //修改hint的位置
        this.hintLeft = e.touches[0].clientX + 'px';
        this.hintTop = e.touches[0].clientY + 'px';
        console.log('长按', e, e.touches[0].clientX, e.touches[0].clientY);

      }, this.pressDuration); // 设置长按触发的时间
    },
    endPress() {
      clearTimeout(this.pressTimer); // 取消计时器
      if (!this.isLongPress) {
        console.log('普通点击');
      }
    }
  }
};
</script>

<template>
  <frame-view class="index" navBarBgColor="#fff">
    <van-swipe-cell v-for="i in 3">
      <template #right>
        <van-button @click="clickDisturb" color="#c2c2c2" square text="免打扰"
                    style="width:148px;height: 100%;margin-left: 1px" />
        <van-button @click="clickDel" color="#ff2d19" square text="删除" style="width:148px;height: 100%;" />
      </template>
      <!--      监听长按-->
      <div class="messageItem" @mousedown="startPress" @mouseup="endPress" @touchstart="startPress"
           @touchend="endPress">
        <img src="./image/业务官号头像@2x.png" style="width: 96px;height: 96px" alt="图片" />
        <div style="margin-left: 24px;display: flex;justify-content: space-between;flex: 1">
          <div>
            <p style="font-size: 32px">收益动态</p>
            <p style="font-size: 24px;color: #999;margin-top: 10px">马先生，五分钟下款18800元，马先…</p>
          </div>
          <p style="color: #999999;">
            10:50
          </p>

        </div>


      </div>
    </van-swipe-cell>
    <div class="hint" :style="{left:hintLeft,top:hintTop}" v-show="isLongPress">
      <p>
        <img src='./image/免打扰@2x.png' style="width: 32px;height: 32px" alt="图片" />
        <span style="margin-left: 6px">免打扰</span>
      </p>
      <p>
        <img src='./image/移除@2x.png' style="width: 32px;height: 32px" alt="图片" />
        <span style="margin-left: 6px">移除</span>
      </p>
      <p>
        <img src='./image/设置@2x.png' style="width: 32px;height: 32px" alt="图片" />
        <span style="margin-left: 6px">设置</span>
      </p>

    </div>

  </frame-view>

</template>

<style scoped lang="scss">
.index {
  background-color: #fff;
}

.messageItem {
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  overflow: hidden;
  //按住背景变色  #f7f7f7
  &:active {
    background-color: #f7f7f7;
  }
}

.hint {
  padding: 0 24px;
  font-size: 28px;
  color: #191919;
  position: fixed;
  display: inline-block;
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.16);
  border-radius: 20px;
  width: 180px;
  background-color: #fff;
  p{
    line-height: 88px;height: 88px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: left;align-items: center;
    //最后一个不要下边框
    &:last-child{
      border-bottom: none;
    }
  }
  //点击后背景变色
  p:active{
    background-color: #f7f7f7;
  }
}
</style>
